<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SC系统二次认证</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="css/all-skins.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="hold-transition login-page">
<div class="login-box" id="rrapp" v-cloak>
    <div class="login-logo">
    </div>
    <!-- second auth-->
    <div class="login-box-body">
        <p class="login-box-msg">二步验证</p>
        <div v-if="error" class="al ert alert-danger alert-dismissible">
            <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
        </div>
        <div v-if="registerFlag" v-show="showFlag" class="alert alert-success">
            <span>第一次登录，请先扫描二维码，再输入验证码</span>
        </div>
        <div v-if="registerFlag" v-show="showFlag" id="qrcode" class="form-group has-feedback" style="margin-left:20px;">
        </div>
        <div class="form-group has-feedback">
            <input type="text" id="authCodeId" class="form-control" v-model="authCode" @keydown="keydown"  placeholder="请输入谷歌身份验证器上的验证码">
        </div>

        <div class="row">
            <div class="col-xs-16">
                <button type="button" class="btn btn-primary btn-block btn-flat"  @click="login">登录</button>
            </div>
        </div>
    </div>
    <div id="showinfo" style="display: none">
        注意：第一次登录CRM，系统校验完帐号和密码后，会弹出"二步验证"的二维码。身份验证器下载地址:<a target="_blank" href="http://www.eagle2fa.com">www.eagle2fa.com</a>
    </div>
    <!-- second auth-->
</div>

<!-- /.login-box -->
<script src="libs/jquery.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="libs/jquery.cookie.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="libs/vue.min.js"></script>
<script src="libs/bootstrap.min.js"></script>
<script src="libs/app.js"></script>
<script src="js/common.js"></script>
<script src="libs/qrcode.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#authCodeId").focus();
    });


    var datoken =  $.cookie("tempToken");
    var vm = new Vue({
        el: '#rrapp',
        data: {
            error: false,
            authCode: '',
            errorMsg: '',
            registerFlag: true,
            showFlag: false
        },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        created : function () {
            //vm.userName = $.cookie("userName");
        },
        methods: {
            login: function () {
                //判断是否为空
                if(isBlank(vm.authCode)){
                   alert("请输入验证码");
                   return;
               }
               var re = /^[0-9]+.?[0-9]*$/;
               if(!re.test(vm.authCode)){
                    alert("请输入数字");
                    return;
               }
                $.ajax({
                    type: "POST",
                    url: baseURL + "sys/auth/login",
                    data: {"tempToken":datoken,"authCode":vm.authCode},
                    dataType: "json",
                    success: function (ret) {
                        if (ret.code == 0) {//登录成功
                            localStorage.setItem("token", ret.token);
                            localStorage.setItem("overAllFrame", ret.overAllFrame);
                            var hrefsrc="indexOther.html";
                            if(ret.operatorvalue == "TR"){
                                hrefsrc ='indexTR.html';
                            }else if(ret.operatorvalue == "JSTX"){
                                hrefsrc="index.html";
                            }
                            parent.location.href = hrefsrc;
                            return;
                        } else {
                            vm.error = true;
                            vm.errorMsg = ret.msg;
                        }
                    }
                });
            },
            generateCode: function () {
                $.ajax({
                    type: "POST",
                    url: baseURL + "sys/generateCode",
                    data: {"tempToken":datoken},
                    dataType: "json",
                    success: function (r) {
                        if (r.code == 0) {//成功
                            if(r.authUrl!=null){
                                vm.registerFlag = true;
                                vm.showFlag = true;
                                if(vm.registerFlag==true){
                                    new QRCode(document.getElementById('qrcode'), r.authUrl);
                                }
                            }else{
                                vm.registerFlag = false;
                                vm.showFlag = false;
                            }
                        } else {
                            vm.error = true;
                            vm.errorMsg = r.msg;
                        }
                    }
                });
            },
            keydown : function(e){
                var ev = document.all ? window.event : e;
                if(ev.keyCode==13) {
                    vm.login();
                }
            }
        }
    });

    $(function () {
        var tgNum = $.cookie("tgNum");
        if(tgNum<=0){
            $("#showinfo").show();
            vm.generateCode(datoken);
        }
    });
    //判断是否为空
    function isBlank(value) {
        return !value || !/\S/.test(value)
    }
</script>
</body>
</html>
